<template>
  <ele-modal
    form
    :width="440"
    :model-value="modelValue"
    title="还款详情"
    @update:modelValue="updateModelValue"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="userId"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
    >
      <template #action="{ row }">
        <el-tag
          :type="enableType(row.enable)"
          class="pointer"
          @click="setEnable(row)"
        >
          {{ enableText(row.enable) }}
        </el-tag>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import {
    getRepayRecordListByUserId,
    getStudentById,
    setAssetsEnable
  } from '@/api/student';
  const emit = defineEmits(['done', 'update:modelValue']);
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object,
    userId: Number
  });

  /** 表格实例 */
  const tableRef = ref(null);
  const jobId = ref(0);
  const showJobDetail = ref(false);

  const enableText = (value) => {
    const cs = {
      1: '无效',
      0: '有效'
    };
    return cs[value];
  };
  const enableType = (state) => {
    const stateMap = {
      1: 'info',
      0: 'success'
    };
    return stateMap[state];
  };

  /** 请求状态 */
  const title = ref('');

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  /** 表格列配置 */
  const columns = ref([
    {
      prop: 'create_time',
      label: '时间',
      width: 160
    },
    {
      prop: 'amount',
      label: '金额',
      width: 100,
      slot: 'amount'
    },
    {
      prop: 'repayType',
      label: '还款方式'
    }
  ]);
  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return getRepayRecordListByUserId({
      ...where,
      ...orders,
      page,
      limit,
      user_id: props.userId,
      tenant_id: ''
    });
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        // getUserDetail();
      } else {
        console.log('什么也没发生');
      }
    }
  );
</script>

<style lang="scss" scoped>
  .detail-table :deep(.el-descriptions__label) {
    width: 108px;
    text-align: right;
    font-weight: normal;
  }
</style>
